<template>
  <div
    class="echart"
    :id="controlid"
    :style="{
      float: 'left',
      width: '100%',
      height: '100%',
    }"
    v-on="$listeners"
  ></div>
</template>
<script>
import * as echarts from "echarts";
import tdTheme from "@/components/echart/theme.json"; // 引入默认主题
import "echarts-gl";
import "echarts-liquidfill/src/liquidFill.js"; //在这里引入

export default {
  name: "myechart",
  props: ["options"],
  data() {
    return {
      mychart: {},
      controlid: "",
      optionconfig: {},
    };
  },
  methods: {
    initChart() {
      // this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
      this.mychart = echarts.init(
        document.getElementById(this.controlid),
        tdTheme
      );
      this.loadOption(this.options);

      // // 随着屏幕大小调节图表
      document.getElementById(this.controlid).addEventListener("resize", () => {
        this.resize();
      });
      this.$emit("initChartAfter");
    },
    resize() {
      this.mychart.resize();
    },
    loadOption(options) {
      this.optionconfig = options;
      if (options !== null) {
        this.mychart.setOption(options);
      } else {
        this.mychart.setOption({});
      }
    },
    getMychart() {
      return this.mychart;
    },
  },
  created() {
    this.controlid =
      "div" + Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    options: {
      handler(newValue) {
        if (this.timer != null) {
          // 清除已经设置的定时器
          clearTimeout(this.timer);
        }
        // 设置新的定时器
        this.timer = setTimeout(() => {
          // 在这里处理实际的输入事件
          this.loadOption(newValue);
        }, 500); // 延迟500毫

      },
      deep: true, // 开启深度监听
    },
  },
  beforeDestroy() {
    if (this.mychart) {
      this.mychart.dispose();
    }
  },
};
</script>
